<template>
    <div class="app-container">
        <el-form :model="filterParams">
            <div class="params-form params-form-gray">
                <el-form-item label="实名名称">
                    <el-input placeholder="请输入" v-model="filterParams.realName"></el-input>
                </el-form-item>
                <el-form-item label="财务单据编号">
                    <el-input placeholder="请输入" v-model="filterParams.slipCode"></el-input>
                </el-form-item>
                <el-form-item label="业务单据编号">
                    <el-input placeholder="请输入" v-model="filterParams.orderCode"></el-input>
                </el-form-item>
                <el-form-item label="业务类型">
                    <el-select placeholder="请选择" v-model="filterParams.serviceType">
                        <el-option label="采集分佣" :value="15" />
                    </el-select>
                </el-form-item>
                <el-form-item label="核销状态">
                    <el-select placeholder="请选择" v-model="filterParams.cancelState">
                        <el-option v-for="item, index in verificationType" :label="item" :value="Number(index)" />
                    </el-select>
                </el-form-item>
                <el-form-item class="end-buttons">
                    <el-button :icon="Search" type="primary" @click="getPaymentDataList">
                        查询
                    </el-button>
                    <el-button :icon="RefreshRight" plain type="primary" @click="reset">重置</el-button>
                </el-form-item>
            </div>
        </el-form>
        <div class="table-operate">
            <el-button type="primary" :disabled="!tableCheckList.length" @click="batchPay">批量收付款</el-button>
        </div>
        <div class="table">
            <el-table :data="paymentList" style="width: 100%" max-height="calc(100vh - 200px)"
                @selection-change="selectionTable">
                <el-table-column type="selection" width="55" fixed="left" :selectable="isSelectable" />
                <el-table-column prop="slipCode" label="编号" width="160" />
                <el-table-column prop="serviceTypeName" label="业务类型" width="160">
                </el-table-column>
                <el-table-column prop="receiptMemberName" label="收款方" min-width="400">
                    <template #default="scope">
                        <div class="desc">{{ splicing([scope.row.receiptMemberName, scope.row.receiptMemberId], '-') }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="city" label="核销状态" width="120">
                    <template #default="scope">
                        <div class="status">
                            {{ verificationType[scope.row.cancelState] }}
                            <el-tooltip class="box-item" effect="dark" :content="scope.row.message"
                                placement="top-start">
                                <el-icon v-if="scope.row.message&&scope.row.cancelState!=3">
                                    <Warning />
                                </el-icon>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="总金额" width="120">
                    <template #default="scope">
                        ￥{{ scope.row.plainMoney }}
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="已核销金额" width="180">
                    <template #default="scope">
                        ￥{{ scope.row.inMoney }}
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="250" />
                <el-table-column prop="createBy" label="创建人" width="250" />
                <template #empty>
                    <el-empty />
                </template>
            </el-table>
        </div>
        <div class="pagination">
            <el-pagination v-model:current-page="pageQuery.current" v-model:page-size="pageQuery.size"
                :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="getPaymentDataList" @current-change="getPaymentDataList" />
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { RefreshRight, Search } from '@element-plus/icons-vue';
import { getPaymentList, confirmPay } from "@/api/finance/platformPayments";
import { ElMessage } from 'element-plus'

const filterParams = ref({});
const paymentList = ref([]);
const total = ref(0);
const pageQuery = ref({
    current: 1,
    size: 10
})
const tableCheckList = ref([]);
/**
 * 核销类型
 */
const verificationType = { 1: '待核销', 2: '部分核销', 3: '已核销' };
const isSelectable = (row, index) => {
    return row.isPay != 1 && row.cancelState != 3;
}
const reset = () => {
    filterParams.value = {};
    getPaymentDataList()
}
const splicing = (arr, sign) => {
    return arr.filter(v => v).join(sign) || '--'
}
/**
 * 获取表格数据
 */
const getPaymentDataList = async () => {
    try {
        const res = await getPaymentList(pageQuery.value, filterParams.value);
        paymentList.value = res.data.list || [];
        total.value = res.data.total || 0;
    } catch (error) {
        console.log(error)
    }
}
/**
 * 选择表格数据
 * @param {*} val 
 */
const selectionTable = (val) => {
    tableCheckList.value = val.map(v => v.slipId);
}

/**
 * 点击支付确认按钮
 */
const batchPay = async () => {
    try {
        await confirmPay({ slipIds: tableCheckList.value });
        ElMessage.success("操作成功");
        getPaymentDataList()
    } catch (error) {
    }
}
onMounted(() => {
    getPaymentDataList();
})
</script>

<style lang="scss" scoped>
$border: 1px solid #DCDFE6;
$topic: #007DFF;

.table-operate {
    border: $border;
    border-bottom: none;
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 20px;
}

.desc {
    word-break: break-all;
    word-wrap: break-word;
    overflow-wrap: break-word;
    padding: 10px 0;
}

.pagination {
    display: flex;
    justify-content: end;
    margin-top: 20px;
}

.status {
    display: flex;
    align-items: center;
    gap: 6px;

    .el-icon {
        color: red;
    }
}

.params-form {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 50px;

    >div:last-child {
        grid-column: 3;

        ::v-deep(.el-form-item__content) {
            display: flex;
            justify-content: end;
        }
    }
}

.table {
    border: $border;

    ::v-deep(.el-table tr) {
        height: 46px;

        .is-link {
            color: $topic;
        }

        td,
        th {
            border-bottom: $border;
        }

        .cell {
            display: flex;
            justify-content: center;
        }
    }

    ::v-deep(.el-table thead tr th.el-table__cell) {
        background: #F2F6FC !important;

        >th {
            background: transparent;
            text-align: center;
        }

        .el-table-fixed-column--right {
            background: #F2F6FC;
        }

    }

    ::v-deep(.el-table tbody tr:nth-child(even)) {
        background: #F2F6FC;
    }

    ::v-deep(.el-table tbody tr:last-child) {
        td {
            border-bottom: none !important;
        }

    }

    ::v-deep(.el-table__inner-wrapper) {
        &::before {
            display: none;
        }
    }
}

.space {
    display: flex;
    gap: 10px;
}

.qr-code {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
}
</style>
<style lang="scss">
.batch-pay-dialog {
    &_total {
        font-size: 12px;
        color: #86909C;
    }

    &_money {
        display: flex;
        justify-content: space-between;
        gap: 4px;
        height: 84px;
        margin: 10px 0;

        >div {
            flex: 1;
            background: #EEF1F4;
            border-radius: 4px;
            display: grid;
            grid-template-columns: 1fr;
            text-align: center;
            padding: 20px;
            box-sizing: border-box;
        }

        &_num {
            font-size: 16px;
            color: #3D3D3D;
        }

        &_title {
            font-size: 12px;
            color: #86909C;
        }
    }
}
</style>